<template>
  <div class="base-manage-user-container">
    <el-tabs v-model="activeName" class="demo-tabs" @tab-click="handleClick">
      <el-tab-pane label="用户" name="first">
        <User></User>
      </el-tab-pane>
      <el-tab-pane label="角色" name="second">
        <Role></Role>
      </el-tab-pane>
      <el-tab-pane label="权限" name="third">
        <Permission></Permission>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<script setup lang="ts">
import { ref } from "vue";
import User from "./User.vue";
import Role from "./Role.vue";
import Permission from "./Permission.vue";
import type { TabsPaneContext } from "element-plus";
const activeName = ref("first");

const handleClick = (tab: TabsPaneContext, event: Event) => {
  console.log(tab, event);
};
</script>
<style lang="scss" scoped>
.base-manage-user-container {
  height: 100%;
  padding: 10px;
}
</style>
